<!-- 
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-26 09:16:23
-->
<template>
  <div class="chart-box" ref="c222">
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 100
      },
      // 存放湿度数据
      humData: [],
      dualAxes: null

    }
  },
  computed: {
    ...mapState(['ed'])
  },
  watch: {
    ed: {
      handler() {
        this.getHumData();
        this.DualAxes.changeData(this.humData);
      },
      deep: true
    }
  },
  // computed: {},
  methods: {
    loadLine() {

      this.dualAxes = new DualAxes(this.$refs.c222, {
        // 将后端获取数据设置给data属性
        // data: [data, data],
        data: [this.humData, this.humData],
        xField: 'insert_time',
        yField: ['temperature', 'humidity'],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          },
        ],
      });

      this.dualAxes.render();
    },
    async getHumData() {
      let res = await get('/dashboard/pageQueryData', this.params);
      let hum = [];
      res.data.list.forEach((item, index, arr) => {
        arr[0].temperature = 0;
        item.insert_time = moment(item.insert_time).format("HH:mm");
        if (index % 10 == 0) {
          hum.push(arr[index])
        }
      });
      this.humData = hum;
    },
  },
  async mounted() {
    await this.getHumData();
    this.loadLine()
  }
  // created() {},
};
</script>
<style scoped>
.chart-box {
  width: 356px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
</style>